<template>
	<view class="body">
		<!-- <view v-if="loading">
			<loading></loading>
		</view> -->
		<view class="container" >
				<view class="echart-container">
					<view class="top_title">
						<text>数据详情</text>
						<image src="/static/images/report1.png" mode=""></image>
						<image src="/static/images/report1.png" mode="" @click="clickChange"></image>
					</view>
					<view class="echarts" >
						<echarts ref="echarts" :option="option" canvasId="echarts"></echarts>
						<!-- <echarts ref="echarts" :option="option" canvasId="echarts2"></echarts>
						<echarts ref="echarts" :option="option" canvasId="echarts3"></echarts> -->
					</view>
				</view>
				<view class="table-container">
					<view class="top_title">
						<text>详情查看</text>
					</view>
					<view class="detail">
						<uni-table>
							<uni-tr>
								<uni-th width="250rpx" align="center">城市</uni-th>
								<uni-th width="110rpx" align="center">排名</uni-th>
								<uni-th width="150rpx" align="center">参与率</uni-th>
								<uni-th width="110rpx" align="center">详细</uni-th>
							</uni-tr>
							<uni-tr v-for="(item, index) in tableData" :key="index">
								<uni-td align="center">{{ item.deptName }}</uni-td>
								<uni-td align="center">
									<view>{{ index+1 }}</view>
								</uni-td>
								<uni-td align="center">{{ item.partakeRate }}</uni-td>
								<uni-td align="center"><text  @click="clickDetail(item)">查看</text>	</uni-td>
							</uni-tr>
						</uni-table>
					</view>
				</view>
			</view>
	</view>
	</template>

<script>
	import echarts from '@/components/echarts-uniapp/echarts-uniapp.vue';
	import {getRate} from '@/api/dashboard/dashboard.js'
	export default {
		data() {
			return {
				option: {},
				tableData:[],
				echartData: {
					yData: [],
					xData: []
				},
				loading:true
			}
		},
		// 注册组件
		components: {
			echarts
		},
		onLoad(e){
			this.activityId=e.activityId
		},
		onReady() {
			this.getData();
			
		},
		methods:{
			clickChange(){
				this.option = {}
				
			},
			getData(){
				let data={
					activityId:this.activityId,
					deptId:100,
					deptIds:'',
					type:0
				}
				getRate(data).then(res=>{
					this.tableData = res.data
					for (var i = 0; i < res.data.length; i++) {
						this.echartData.yData.push( res.data[i].deptName)
						this.echartData.xData.push(res.data[i].partakeRate)
					}
				}).then(()=>{
					this.option = {
						toolbox: {
							show: true,
							feature: {
								mark: {
									show: true
								},
								dataView: {
									show: true,
									readOnly: false
								},
								magicType: {
									show: true,
									type: ['line', 'bar']
								},
								restore: {
									show: true
								},
								saveAsImage: {
									show: true
								}
							}
						},
						grid:{
								show:false,
								top:'10%',
								right:'5%',
								bottom:'18%',
								left:'10%'
						},
						calculable: true,
						xAxis: [{
							type: 'category',
							
							data: this.echartData.yData,
							axisLabel: {
								rotate: 60,
								textStyle: {
									color: '#979797',
									fontSize: 10
								}
							},
							axisLine: {
								show: true,
								lineStyle: {
									type: 'solid',
									color: '#D9D9D9',//左边线的颜色
									width: '1'//坐标线的宽度
								}
							},
							
						}],
						yAxis: [{
							type: 'value',
							axisLine: {
								show: true,
								minInterval:1,
								lineStyle: {
									type: 'solid',
									color: '#D9D9D9',//左边线的颜色
									width: '1'//坐标线的宽度
								}
							},
							splitLine: {
								show: false,
							}
						}],
						series: [{
							name: '考试参与率',
							type: 'bar',
							data: this.echartData.xData,
							barWidth: 8,
							itemStyle: {
								normal: {
									color: '#508CFF',
									barBorderRadius: [10, 10, 10, 10], //依次表示 左上，右上，右下、左下
									label: {
										show: true, //开启显示
										position: 'top', //在上方显示
										textStyle: { //数值样式
											color: '#508CFF',
											fontSize: 10
										}
									}
								}
					
							},
						}]
					}
				}					
				)
				this.loading=false
			},
			clickDetail(e){
				console.log(e)
				this.$tab.navigateTo('/pages/work/datacenter/allCountyData?deptId=' + e.deptId + '&activityId=' + this.activityId)
			}
		}
	}
</script>

<style lang="scss">
	page {
		background: #6E89BE;
	}

	.container {
		width: calc(100vw - 40rpx);
		height: auto;
		margin: 0 auto;
		
		.echart-container {
			.echarts {
				width: 100%;
				height: 850rpx;
				background-color: #fff;
				border-radius: 20rpx;
			}
		}
		.table-container{
			.detail{
				width: 100%;
				height: 850rpx;
				background-color: #fff;
				border-radius: 20rpx;
				padding: 50rpx 40rpx;
				.uni-table{
					color: #fff;
					.uni-table-tr{
						background-color: #7FABFF;
						.uni-table-td{
							color: #fff !important;
							padding: 10rpx !important;
							border-bottom: 14rpx #fff solid !important;
						}
						.uni-table-th{
							color: #fff !important;
							border-bottom: 14rpx #fff solid !important;
						}
					}
					.uni-table-tr:nth-child(1){
						background-color: #798BAD;
					}
				}
			}
		}
	}
	.top_title {
		color: $uni-text-color-inverse;
		display: flex;
		line-height: 70rpx;
		padding-left: 20rpx;
		align-items: center;
	
		text {
			width: 550rpx;
		}
	
		image {
			width: 40rpx;
			height: 40rpx;
			margin: 0 10rpx;
		}
	}
</style>
